<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
            text-align: center;
        }
        .chess{
            cursor: pointer;
            display: block;
            margin: 50px auto;
            box-shadow: 5px 5px 5px #b9b9b9,-2px -2px 2px #EFEFEF;
        }
        div{
            text-align: center;

        }
        .restart{
            padding: 10px 20px;
            background-color: cyan;
            border-radius: 10%;
            text-decoration: none;
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3 class="title">--五子棋--</h3>
    <canvas class="chess" width="450px" height="450px"></canvas>
    <div>
        <a href="" class="restart">重新开始</a>
    </div>
    <script>
      var chess=document.getElementsByClassName('chess')[0]
      var context=chess.getContext('2d')
      context.style='#b9b9b9'
      window.onload=function(){
          drawChessBoard()
      }
      function drawChessBoard(){
          for (var i = 0; i < 15; i++) {
              //画横线
              context.moveTo(15,15+i*30)
              context.lineTo(435,15+i*30)
              //连接两个点
              context.stroke()

              context.moveTo(15+i*30,15)
              context.lineTo(15+i*30,435)
              context.stroke()
          }
      }
    //设置赢的五个的位置的数组
    var wins=[]
    for(var i=0;i<15;i++){
        wins[i]=[]
        for(j=0;j<15;j++){
            wins[i][j]=[]
        }
    }
    // 横线赢
    var count=0
    for(var i=0;i<15;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                wins[j+k][i][count]=true
            }
            count++
        }
    }
    // 竖线
    for(var i=0;i<15;i++){
        for (var j =0;j <11;j++){ 
            for(var k=0;k<5;k++){
                wins[i][j+k][count]=true
            }
            count++
        }
    }
    // 斜线
    for(var i=0;i<11;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                wins[i+k][j+k][count]=true
            }
            count++
        }
    }
    // 反斜
    for(var i=0;i<11;i++){
        for(var j=14;j>3;j--){
            for(var k=0;k<5;k++){
                wins[i+k][j-k][count]=true
            }
            count++
        }
    } 
    // 标记坐标是否已经下棋
    var chessboard=[]
    for(var i=0;i<15;i++){
        chessboard[i]=[];
        for(var j=0;j<15;j++){
            chessboard[i][j]=0
        }
    }
    //下棋
    var me=true//表示谁下棋
    var over=false//标记游戏结束
    var myWin=[]//记录用户在赢法上的数值
    for(var i=0;i<count;i++){
        myWin[i]=0;
    }
    var computerWin=[]//AI在判断赢法的数组
    for(var i=0;i<count;i++){
        myWin[i]=0
        computerWin[i]=0
    }
    
    chess.onclick=function(e){
        if (over) {
            return
        }
        //判断人下棋
        if (!me) {
            return
        }
        //获取x轴
        var x=e.offsetX
        var y=e.offsetY
        var i=Math.floor(x/30)
        var j=Math.floor(y/30)
        if (chessboard[i][j]==0) {
            oneStep(i,j,me)
            chessboard[i][j]=1
            // 下子的方法
            for(var k=0;k<count;k++){
                if (wins[i][j][k]) {
                    myWin[k]++
                    if (myWin[k]==5) {
                        alert("还行，再来啊")
                        over=true
                    }
                }
            }
        }
        //判断是否赢了
        if (!over) {
            me=!me
            // AI下棋
            computerAI()
        }
    }

    function computerAI(){
        //空白子在人下的值
        var myScore=[]
        // 空白在AI的值
        var computerScore=[]
        for(var i=0;i<15;i++){
            myScore[i]=[]
            computerScore[i]=[]
            for(var j=0;j<15;j++){
                myScore[i][j]=0
                computerScore[i][j]=0
            }
        }
        //空白的最大值
        var max=0
        var x=0,y=0
        for(var i=0;i<15;i++){
            for(var j=0;j<15;j++){
                // 判断是否空白
                if (chessboard[i][j]==0) {
                    for(var k=0;k<count;k++){
                        if (wins[i][j][k]) {
                            if (myWin[k]==1) {
                                myScore[i][j]+=200
                            }else if (myWin[k]==2) {
                                myScore[i][j]+=400
                            }else if (myWin[k]==3) {
                                myScore[i][j]+=2000
                            }else if (myWin[k]==4) {
                                myScore[i][j]+=10000
                            }
                            if (computerWin[k]==1) {
                                computerScore[i][j]+=220
                            }else if(computerWin[k]==2) {
                                computerScore[i][j]+=420
                            }else if(computerWin[k]==3) {
                                computerScore[i][j]+=2200
                            }else if(computerWin[k]==4){
                                computerScore[i][j]+=20000
                            }
                        }
                        
                    }
                    if (myScore[i][j]>max) {
                        max=myScore[i][j]
                        x=i;
                        y=j;
                    }else if(myScore[i][j]=max){
                        if (computerScore[i][j]>max) {
                            max=computerScore[i][j]
                            x=i
                            y=j
                        }
                    }
                    if (computerScore[i][j]>max) {
                        max=computerScore[i][j]
                        x=i
                        y=j
                    }else if (computerScore[i][j]==max) {
                        if (myScore[i][j]>max) {
                            max=myScore[i][j]
                            x=i
                            y=j
                        }
                    }

                }

            }
        }
        oneStep(x,y,me);
        chessboard[x][y]=1
        // 判断计算机的输赢
        for(var k=0;k<count;k++){
            if (wins[x][y][k]) {
                computerWin[k]+=1
                if (computerWin[k]==5) {
                    alert("憨憨，就这，就这！")
                    over=true
                }
            }
        }
        if (!over) {
            me=!me
        }
    }

    // 落子的方法,形状
    function oneStep(i,j,me){
        context.beginPath()
        context.arc(15+i*30,15+j*30,13,0,2*Math.PI)
        context.closePath()
        var color;
        if (me) {
            color="#000"
        }else{
            color="#f2eada"
        }
        context.fillStyle=color
        context.fill()
    }
    </script>
</body>
</html>